<template>
	<view class="searchPage">
		<view class="search ff-bg-blue">
			<u-search :focus="true" placeholder="请输入搜索关键字" @custom="searchClick" @search="searchClick"
				bg-color="#FFFFFF" :clearabled="true" :show-action="true" :action-style="actionStyle" action-text="搜索"
				:height="72" v-model="searchData"></u-search>
		</view>
		<view class="line-H"></view>
		<view class="home">
			<!-- 内容部分 -->
			<!-- 机构列表部分 -->
			<view class="ff-padding-10 home-content">
				<view v-if="stateType == 1 || stateType == 3 || stateType == 5">
					<view v-if="InstitutionsList.length > 0">
						<view class="ff-bg-fff ff-padding-15 ff-margin-bottom-10 ff-border-radius-9 ff-align-items-one"
							@click="organizationClick(item)" v-for="(item, index) of InstitutionsList" :key="index">
							<view class="home-content-head ff-margin-right-15 ff-border-radius-9">
								<image
									src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/default_avatar.png"
									mode=""></image>
							</view>
							<view class="home-content-detailed ff-width-250">
								<view
									class="ff-ellipsis-1 ff-font-15 ff-font-weight-600 ff-line-height-1-1 ff-width-250">
									{{ item.orgName }}
								</view>
								<view class="ff-flex ff-margin-top-9 ff-margin-bottom-8 ff-font-13">
									<view class="ff-font-13 home-content-detailed-fraction ff-flex">
										<view class="ff-color-fff">
											{{ item.registerNum !== null ? item.registerNum : 0 }}
										</view>
										一消证书
									</view>
									<view class="ff-font-13 ff-margin-left-10 home-content-detailed-fraction ff-flex">
										<view class="ff-color-fff">
											{{ item.operatorNum !== null ? item.operatorNum : 0 }}
										</view>
										操作员证书
									</view>
								</view>
								<view class="ff-font-13 ff-color-gray-one home-content-detailed-address">
									<view class="ff-align-items-one">
										<image
											src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home-address.png"
											mode=""></image>
										<view class="ff-margin-left-2 ff-ellipsis-1">距离您{{ item.nearest / 1000 }}km |
											{{ item.orgAddr == null ? '/' : item.orgAddr }}
										</view>
									</view>
								</view>
							</view>
						</view>
						<u-divider v-if="noData" border-color="#909399" height="120" margin-bottom="30" color="#909399"
							bg-color="#f5f5f5">没有更多了</u-divider>
					</view>
					<f-noData v-else></f-noData>
				</view>
				<view v-if="stateType == 2">
					<view v-if="demandList.length > 0">
						<view class="ff-bg-fff ff-padding-15 ff-margin-bottom-10 ff-border-radius-9 ff-align-items-one"
							@click="demandClick(item)" v-for="(item, index) of demandList" :key="index">
							<view class="home-content-detailed">
								<view
									class="ff-align-items-one ff-flex-between ff-font-15 ff-font-weight-600 ff-line-height-1-1 ff-margin-bottom-10">
									<view class="ff-ellipsis-1 ff-width-250">{{ item.projectName }}</view>
									<view class="ff-font-13 fraction ff-color-fff" v-if="item.isResponse == 1">响应成功
									</view>
								</view>
								<view class="ff-font-13 ff-color-gray-one home-content-detailed-address">
									<view class="ff-align-items-one ff-margin-bottom-9">
										<image class="ff-margin-right-2"
											src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home-budget.png"
											mode=""></image>
										<view class="ff-ellipsis-1">项目预算：{{ item.projectBudget }}元</view>
									</view>
									<view class="ff-align-items-one ff-margin-bottom-9">
										<image class="ff-margin-right-2"
											src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home-company.png"
											mode=""></image>
										<view class="ff-width-315 ff-ellipsis-1">需求方：{{ item.companyName }}</view>
									</view>
									<view class="ff-align-items-one ff-margin-bottom-9">
										<image class="ff-margin-right-2"
											src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/times.png"
											mode=""></image>
										<view class="ff-width-315 ff-ellipsis-1">
											发布时间：{{ item.created == null ? '/' : item.created.substr(0, item.created.length - 3) }}
										</view>
									</view>
									<view class="ff-align-items-one">
										<image class="ff-margin-right-2"
											src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home-address.png"
											mode=""></image>
										<view class="ff-width-315 ff-ellipsis-1">距离您{{ item.nearest / 1000 }}km |
											{{ item.projectAddr == null ? '/' : item.projectAddr }}
										</view>
									</view>
								</view>
							</view>
						</view>
						<u-divider v-if="noData" border-color="#909399" height="120" margin-bottom="30" color="#909399"
							bg-color="#f5f5f5">没有更多了</u-divider>
					</view>
					<f-noData v-else></f-noData>
				</view>
				<view v-if="stateType == 4">
					<view v-if="demandList.length > 0">
						<view class="ff-bg-fff ff-padding-15 ff-margin-bottom-10 ff-border-radius-9 ff-align-items-one"
							@click="demandAssesClick(item)" v-for="(item, index) of demandList" :key="index">
							<view class="home-content-detailed">
								<view
									class="ff-align-items-one ff-flex-between ff-font-15 ff-font-weight-600 ff-line-height-1-1 ff-margin-bottom-10">
									<view class="ff-ellipsis-1 ff-width-250">{{ item.assessName }}</view>
									<view class="ff-font-13 fraction ff-color-fff" v-if="item.isResponse == 1">响应成功
									</view>
								</view>
								<view class="ff-font-13 ff-color-gray-one home-content-detailed-address">
									<view class="ff-align-items-one ff-margin-bottom-8">
										<image class="ff-margin-right-2"
											src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home-budget.png"
											mode=""></image>
										<view class="ff-ellipsis-1">项目预算：{{ item.assessProjectBudget }}元</view>
									</view>
									<view class="ff-align-items-one ff-margin-bottom-8">
										<image class="ff-margin-right-2"
											src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home-company.png"
											mode=""></image>
										<view class="ff-width-315 ff-ellipsis-1">需求方：{{ item.companyName }}</view>
									</view>
									<view class="ff-align-items-one">
										<image class="ff-margin-right-2"
											src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home-address.png"
											mode=""></image>
										<view class="ff-width-315 ff-ellipsis-1">距离您{{ item.nearest / 1000 || '0' }}km |
											{{ item.assessAddr == null ? '/' : item.assessAddr }}
										</view>
									</view>
								</view>
							</view>
						</view>
						<u-divider v-if="noData" border-color="#909399" height="120" margin-bottom="30" color="#909399"
							bg-color="#f5f5f5">没有更多了</u-divider>
					</view>
					<f-noData v-else></f-noData>
				</view>
				<view v-if="stateType == 6">
					<view v-if="demandList.length > 0">
						<view class="ff-bg-fff ff-padding-15 ff-margin-bottom-10 ff-border-radius-9 ff-align-items-one"
							@click="demandTestClick(item)" v-for="(item, index) of demandList" :key="index">
							<view class="home-content-detailed">
								<view
									class="ff-align-items-one ff-flex-between ff-font-15 ff-font-weight-600 ff-line-height-1-1 ff-margin-bottom-10">
									<view class="ff-ellipsis-1 ff-width-250">{{ item.testName }}</view>
									<view class="ff-font-13 fraction ff-color-fff" v-if="item.isResponse == 1">响应成功
									</view>
								</view>
								<view class="ff-font-13 ff-color-gray-one home-content-detailed-address">
									<view class="ff-align-items-one ff-margin-bottom-8">
										<image class="ff-margin-right-2"
											src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home-budget.png"
											mode=""></image>
										<view class="ff-ellipsis-1">项目预算：{{ item.testProjectBudget }}元</view>
									</view>
									<view class="ff-align-items-one ff-margin-bottom-8">
										<image class="ff-margin-right-2"
											src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home-company.png"
											mode=""></image>
										<view class="ff-width-315 ff-ellipsis-1">委托单位：{{ item.companyName }}</view>
									</view>
									<view class="ff-align-items-one">
										<image class="ff-margin-right-2"
											src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home-address.png"
											mode=""></image>
										<view class="ff-width-315 ff-ellipsis-1">距离您{{ item.nearest / 1000 || '0' }}km |
											{{ item.testAddr == null ? '/' : item.testAddr }}
										</view>
									</view>
								</view>
							</view>
						</view>
						<u-divider v-if="noData" border-color="#909399" height="120" margin-bottom="30" color="#909399"
							bg-color="#f5f5f5">没有更多了</u-divider>
					</view>
					<f-noData v-else></f-noData>
				</view>
				<view v-if="!stateType">
					<view v-if="InstitutionsList.length > 0">
						<view class="ff-bg-fff ff-padding-15 ff-margin-bottom-10 ff-border-radius-9 ff-align-items-one"
							@click="organizationClick(item)" v-for="(item, index) of InstitutionsList" :key="index">
							<view class="home-content-head ff-margin-right-15 ff-border-radius-9">
								<image
									src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/default_avatar.png"
									mode=""></image>
							</view>
							<view class="home-content-detailed ff-width-250">
								<view
									class="ff-ellipsis-1 ff-font-15 ff-font-weight-600 ff-line-height-1-1 ff-width-250">
									{{ item.orgName }}
								</view>
								<view class="ff-flex ff-margin-top-9 ff-margin-bottom-8 ff-font-13">
									<view class="ff-font-13 home-content-detailed-fraction ff-flex">
										<view class="ff-color-fff">
											{{ item.registerNum !== null ? item.registerNum : 0 }}
										</view>
										一消证书
									</view>
									<view class="ff-font-13 ff-margin-left-10 home-content-detailed-fraction ff-flex">
										<view class="ff-color-fff">
											{{ item.operatorNum !== null ? item.operatorNum : 0 }}
										</view>
										操作员证书
									</view>
								</view>
								<view class="ff-font-13 ff-color-gray-one home-content-detailed-address">
									<view class="ff-align-items-one">
										<image
											src="https://fire-system.oss-cn-beijing.aliyuncs.com/web/fire-technology/home-address.png"
											mode=""></image>
										<view class="ff-margin-left-2 ff-ellipsis-1">距离您{{ item.nearest / 1000 }}km |
											{{ item.orgAddr == null ? '/' : item.orgAddr }}
										</view>
									</view>
								</view>
							</view>
						</view>
						<u-divider v-if="noData" border-color="#909399" height="120" margin-bottom="30" color="#909399"
							bg-color="#f5f5f5">没有更多了</u-divider>
					</view>
					<f-noData v-else></f-noData>
				</view>
			</view>
		</view>

		<!-- 提示框 -->
		<f-loading ref="loading" />
		<u-toast ref="uToast" />
		<u-back-top :scrollTop="scrollTop" top="200" :icon-style="iconStyle" :custom-style="customstyle"></u-back-top>
		<!-- 未获取到定位示弹框 -->
		<u-modal v-model="locationModal" title="温馨提示" :content-style="{ 'line-height': '1.5' }"
			content="当前位置获取失败，请您开启GPS定位权限后再试！" />
	</view>
</template>

<script>
	export default {
		name: 'homeSearch',
		data() {
			return {
				stateType: '', // 判断类型
				locationModal: false, // 定位失败弹框显/隐
				InstitutionsList: [], // 机构搜索得到的内容数组
				demandList: [], // 需求搜索得到的内容数组
				searchData: '', // 提交的搜索的内容
				noData: false, // 没有更多数据了
				noDetails: false, // 暂无图片的状态
				// 机构列表需要的参数
				params: {
					serviceType: 1, // 业务类型，1-维保，2-评估
					sort: {
						type: 1, // 排序类型默认选择 , 0:默认排序， 1:离我最近， 3:证书资质
						longitude: '',
						latitude: ''
					},
					current: 1,
					size: 7,
					keyword: '' // 搜索的内容
				},
				scrollTop: 0,
				iconStyle: {
					fontSize: '32rpx',
					color: '#FFFFFF'
				},
				customstyle: {
					background: '#3B83FE'
				},
				actionStyle: {
					color: '#fff'
				},
				requestUrl: '' // 机构列表 or 需求请求地址
			};
		},
		onLoad(e) {
			this.stateType = e.stateType;
			// 1-维保机构 2-维保需求 3-评估机构 4-评估需求 5-检测机构 6-检测需求
			// -----维保
			if (e.stateType == 1) {
				this.params.serviceType = 1; // 业务类型，1-维保，2-评估
				this.requestUrl = '/serviceOrg/page';
				return;
			}
			if (e.stateType == 2) {
				delete this.params.serviceType
				this.requestUrl = '/project/page';
				return;
			}
			// -----评估
			if (e.stateType == 3) {
				this.params.serviceType = 2; // 业务类型，1-维保，2-评估
				this.requestUrl = '/serviceOrg/page';
				return;
			}
			if (e.stateType == 4) {
				delete this.params.serviceType
				this.requestUrl = '/bsAssessProjectInfo/getPageList';
				return;
			}
			// -----检测
			if (e.stateType == 5) {
				this.params.serviceType = 2; // 业务类型，1-维保，2-评估
				this.requestUrl = '/serviceOrg/page';
				return;
			}
			if (e.stateType == 6) {
				delete this.params.serviceType
				this.requestUrl = '/bsTestProjectInfo/org/getPageList';
				return;
			}
			this.requestUrl = '/serviceOrg/page';
		},
		// 上拉加载
		onReachBottom() {
			// console.log('上拉加载操作-----------------');
			this.params.current++;
			this.getInstitutionsList();
		},
		methods: {
			// 返回顶部
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			// 搜索工程
			searchClick() {
				let that = this;
				that.noDetails = false;
				that.noData = false;
				that.params.current = 1;
				if (that.searchData) {
					that.params.keyword = that.searchData;
					uni.getLocation({
						type: 'gcj02',
						success: function(res) {
							// console.log('当前位置的经度-----：', res);
							that.params.sort.latitude = res.latitude;
							that.params.sort.longitude = res.longitude;
							that.getInstitutionsList(); // 获取服务机构列表数据
						},
						fail(error) {
							// console.log('位置定位失败返回----', error);
							that.locationModal = true;
						}
					});
				} else {
					that.$refs.uToast.show({
						title: '请输入搜索内容',
						type: 'warning'
					});
				}
			},
			// 获取项目列表数据
			async getInstitutionsList() {
				this.$refs.loading.openLoading('加载中···'); // 打开loading动画
				const data = await this.$http.post({
					url: this.requestUrl,
					data: this.params
				});
				this.$refs.loading.closeLoading(); // 关闭loading动画
				// console.log('服务机构列表数据-----', data);
				if (data.code == 200) {
					const infoList = data.data.records;
					if (this.stateType == 1 || this.stateType == 3 || this.stateType == 5) {
						if (infoList.length == 0 && this.params.current == 1) {
							// console.log('首次加载没数据');
							this.noData = false;
							this.noDetails = true;
							this.InstitutionsList = [];
						} else if (infoList.length < 5 && this.params.current == 1) {
							// console.log('首次加载有数据，小于五条');
							this.noData = true;
							this.noDetails = false;
							this.InstitutionsList = infoList;
						} else if (infoList.length !== 0 && this.params.current == 1) {
							// console.log('首次加载有数据');
							this.noData = false;
							this.noDetails = false;
							this.InstitutionsList = infoList;
						} else if (infoList.length !== 0 && this.params.current > 1) {
							// console.log('上拉加载更多数据');
							this.noData = false;
							this.noDetails = false;
							this.InstitutionsList = this.InstitutionsList.concat(infoList);
						} else if (infoList.length == 0 && this.params.current > 1) {
							// console.log('上拉加载没有更多数据了');
							this.noData = true;
							this.noDetails = false;
						}
					} else if (this.stateType == 2 || this.stateType == 4 || this.stateType == 6) {
						if (infoList.length == 0 && this.params.current == 1) {
							// console.log('首次加载没数据');
							this.noData = false;
							this.noDetails = true;
							this.demandList = [];
						} else if (infoList.length < 5 && this.params.current == 1) {
							// console.log('首次加载有数据，小于五条');
							this.noData = true;
							this.noDetails = false;
							this.demandList = infoList;
						} else if (infoList.length !== 0 && this.params.current == 1) {
							// console.log('首次加载有数据');
							this.noData = false;
							this.noDetails = false;
							this.demandList = infoList;
						} else if (infoList.length !== 0 && this.params.current > 1) {
							// console.log('上拉加载更多数据');
							this.noData = false;
							this.noDetails = false;
							this.demandList = this.demandList.concat(infoList);
						} else if (infoList.length == 0 && this.params.current > 1) {
							// console.log('上拉加载没有更多数据了');
							this.noData = true;
							this.noDetails = false;
						}
					} else {
						if (infoList.length == 0 && this.params.current == 1) {
							// console.log('首次加载没数据');
							this.noData = false;
							this.noDetails = true;
							this.InstitutionsList = [];
						} else if (infoList.length < 5 && this.params.current == 1) {
							// console.log('首次加载有数据，小于五条');
							this.noData = true;
							this.noDetails = false;
							this.InstitutionsList = infoList;
						} else if (infoList.length !== 0 && this.params.current == 1) {
							// console.log('首次加载有数据');
							this.noData = false;
							this.noDetails = false;
							this.InstitutionsList = infoList;
						} else if (infoList.length !== 0 && this.params.current > 1) {
							// console.log('上拉加载更多数据');
							this.noData = false;
							this.noDetails = false;
							this.InstitutionsList = this.InstitutionsList.concat(infoList);
						} else if (infoList.length == 0 && this.params.current > 1) {
							// console.log('上拉加载没有更多数据了');
							this.noData = true;
							this.noDetails = false;
						}
					}
				} else {
					this.$refs.uToast.show({
						title: data.msg,
						type: 'error'
					});
				}
				this.$refs.loading.closeLoading(); // 打开loading动画
			},
			// 点击进入项目详情页
			organizationClick(item) {
				this.$pageJump.navigateTo('/pages/common/home/homeDetails?id=' + item.id + '&nearest=' + item.nearest);
			},
			// 进去需求详情页------维保
			demandClick(item) {
				this.$pageJump.navigateTo('/pages/maintenance/public/demand/demandDetails?id=' + item
					.id);
			},
			// 进去需求详情页------评估
			demandAssesClick(item) {
				this.$pageJump.navigateTo('/pages/assessment/common/square/components/demandDetails?id=' + item.assessId);
			},
			// 进去需求详情页------检测
			demandTestClick(item) {
				this.$pageJump.navigateTo('/pages/assessment/common/square/components/demandDetails?id=' + item.id);
			},
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.home-content-detailed-fraction {
		align-items: center;
		color: #e7624b;

		view {
			background-color: #e7624b;
			padding: 4rpx 14rpx;
			border-top-left-radius: 15rpx;
			border-bottom-left-radius: 15rpx;
			border-bottom-right-radius: 15rpx;
			margin-right: 8rpx;
		}
	}

	.home-content-detailed {
		.fraction {
			font-size: 26rpx;
			background-color: #ff6f00;
			padding: 12rpx 22rpx;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
		}
	}

	.searchPage {
		.search {
			padding: 30rpx 15rpx 30rpx 30rpx;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 2111;
			width: 100%;
		}

		.line-H {
			height: 130rpx;
		}

		.home {
			&-content {
				&-head {
					width: 120rpx;
					height: 120rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				&-detailed-address {
					.ff-align-items-one {
						image {
							width: 30rpx;
							height: 30rpx;
							margin-top: -5rpx;
						}
					}

					.ff-margin-left-3 {
						max-width: 460rpx;
					}
				}
			}
		}

		/deep/.u-action-active {
			line-height: 1.3;
		}
	}
</style>